<script setup>
import socket from '@/utils/socket'
import { storeToRefs } from 'pinia'
import { Bottom, Delete, Top } from '@element-plus/icons-vue'
//----------------------页面左侧表单数据和操作start-----------------------------------------------------
import { useFormStore } from '@/stores/formData.js'
import dataForm from '@/composables/formParam/formData'
//----------------------页面中间表单数据和操作start---------------------------------------------------------
import itemSelect from '@/composables/formParam/selectItem.js'
//----------------------任务上传start------------------------------------------------------------------
import taskUploadHandler from '@/composables/formParam/TaskUploadHandler.js'
import useUIStore from '@/stores/UI.js'
import { useMultipleTaskData } from '@/stores/multipleTaskData.js'
import initHandler from '@/composables/formParam/initHandler.js'
import { useSimpleTaskData } from '@/stores/simpleTaskData.js'
import { useSimpleUIStore } from '@/stores/simpleTaskUI.js'
import { useMultipleUIStore } from '@/stores/multipleTaskUI.js'

const formStore = useFormStore()
const { formData } = storeToRefs(formStore)

const { formFields, algorithmType, problemType } = dataForm()
//----------------------页面左侧表单数据和操作end---------------------------------------------------------

const { algorithm_Items, problem_Items, addItem, removeBtn, moveOneIndex } = itemSelect()
//----------------------页面中间表单数据和操作end---------------------------------------------------------

const { handleUploadTask } = taskUploadHandler()

const UIStore = useUIStore()
const { submitDisabled } = storeToRefs(UIStore)

const multipleTaskData = useMultipleTaskData()
const { updateMultipleTable, statistical_result } = multipleTaskData

const { algorithms_data, problems_data, algorithm_list, problem_list, handleInitMsg } = initHandler()

const submitForm = () => {
  handleUploadTask(algorithm_list, algorithm_Items, problem_list, problem_Items)
}

const simpleTaskData = useSimpleTaskData()
const { simpleTaskInit, handleSimpleTask, handleSimpleIndicatorTask } = simpleTaskData

const simpleUIStore = useSimpleUIStore()
const { onSimpleTaskComplete } = simpleUIStore

const multipleUIStore = useMultipleUIStore()
const { UIOnMultipleComplete, onExcelComplete, onDrawingComplete } = multipleUIStore

const msgHandlers = {
  0: handleInitMsg,
  2: updateMultipleTable,
  4: UIOnMultipleComplete,
  6: handleSimpleTask,
  7: simpleTaskInit,
  8: onSimpleTaskComplete,
  9: handleSimpleIndicatorTask,
  10: statistical_result,
  13: onExcelComplete,
  15: onDrawingComplete
}
//----------------- socket消息处理-----------------------------------------------------------------
const onReceive = message => {
  message = JSON.parse(message)
  const messageType = message.messageType
  msgHandlers[messageType](message)
}
//----------------------处理收到的消息end---------------------------------------------------------------

//----------------------页面初始化start----------------------------------------------------------------
const configSocket = () => {
  socket.connectURL = 'ws://localhost:8888/websocket'
  socket.init(onReceive)
}
onMounted(() => {
  configSocket()
})

//----------------------页面初始化end------------------------------------------------------------------
</script>

<template>
  <div class="main-content">
    <div class="left-content">
      <ShowCard v-model="algorithmType"
                :data-list="algorithms_data"
                :selected-data="algorithm_Items"
                @clickHande="addItem"
      />

      <ShowCard v-model="problemType"
                :data-list="problems_data"
                :selected-data="problem_Items"
                @clickHande="addItem"
      />
    </div>


    <div class="right-content">
      <el-form :model="formData" @submit.native.prevent="submitForm" label-position="top">
        <MyCollapse title="Algorithms"
                    :items="algorithm_Items"
                    v-model:data-list="algorithm_list"
                    @moveOneIndex="moveOneIndex"
                    @removeBtn='removeBtn'
        />
        <MyCollapse title="Problems"
                    :items="problem_Items"
                    v-model:data-list="problem_list"
                    @moveOneIndex="moveOneIndex"
                    @removeBtn='removeBtn'
        />
        <el-form-item v-for="(field, index) in formFields" :key="index" :label="field.label">
          <el-input v-if="field.type === 'text'" v-model="formData[field.name]"></el-input>
          <el-input-number :step="field.step" v-else-if="field.type === 'number'"
                           v-model="formData[field.name]"></el-input-number>
          <el-select v-else-if="field.type === 'select'" v-model="formData[field.name]">
            <el-option v-for="(option, optionIndex) in field.options" :key="optionIndex" :label="option.label"
                       :value="option.value"></el-option>
          </el-select>
          <!-- 添加其他类型的字段组件 -->
        </el-form-item>
        <el-button type="primary" :disabled='submitDisabled' native-type="submit">Submit</el-button>
      </el-form>
    </div>
  </div>
</template>


<style lang="scss" scoped>
@mixin flex-container {
  display: flex;
  justify-content: space-evenly;
}

@mixin border-right($width) {
  border-right: #{$width} solid;
}

.main-content {
  @include flex-container;
  height: 100%;
  margin: 0 10px;

  .left-content {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    @include border-right(1px);
    @include flex-container;
    align-content: start;
  }

  .right-content {
    width: 38%;
    padding-top: 20px;
    padding-right: 10px;
    padding-left: 10px;
    @include border-right(1px);
  }

  form {
    @include flex-container;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
  }
}
</style>
